<template>
	<div class="layout-pd">
    <zh-space style="padding-top: 10px">
      <zh-card title="">
				<zh-form ref="queyFormRef" :model="state.queryParam" :rules="state.rules">

        <zh-form-select
            prop="datasourceId"
            label="所属数据源"
            placeholder="单选"
            allowClear
            :options="state.apiDict"
            :fieldNames="{ label: 'dataSourcename', value: 'dataSourceid' }"
            v-model="state.queryParam.datasourceId"
            @change="getTableList(state.queryParam.datasourceId)"
        ></zh-form-select>

        <zh-form-select
            prop="tableId"
            label="表名"
            placeholder="单选"
            allowClear
            :options="state.tableApiDict"
            :fieldNames="{ label: 'tableFullName', value: 'id' }"
            v-model="state.queryParam.tableId"
        ></zh-form-select>

					<zh-form-query v-model="state.advanced" :form-ref="queyFormRef" :table-ref="tableListRef">
          </zh-form-query>
				</zh-form>
			</zh-card>
      <zh-table
				ref="tableListRef"
				title="表字段信息"
				:height="600"
        funcCode="coTableFieldMeta0001"
				:columns="state.tableColumn"
				:disabled="false"
        :stripe="false"
        :rowConfig="{keyField:'id'}"
			>
        <template #header_button>
          <zh-button button-type="add"  v-func:coTableMeta0004 @click="addTable()">新增字段</zh-button>
        </template>
        <template #version_default="{ row }">
          <span style="padding-right:10px">{{row.excelVersion}}</span><el-tag  effect="dark" v-if="row.newFlag==='1'">默认使用</el-tag>
        </template>
        <template #operate_default="{ row }">

          <el-tooltip
            effect="dark"
            content="修改字段信息"
            placement="top"
          >
            <zh-button  v-func:coTableFieldMeta0005 button-type="edit" link @click="editModel(row)"></zh-button>
          </el-tooltip>


          <el-popconfirm title="是否确认删除该字段?"  @confirm="delTable(row)">
            <template #reference>
                <zh-button v-func:coTableFieldMeta0006 type="danger" link buttonType="del"></zh-button>
            </template>
          </el-popconfirm>
				</template>
			</zh-table>
    </zh-space>
    <zh-dialog :title="state.modalTitle"  width="80%"  v-model="state.visible" >
			<ColumAlertForm ref="excelModelPage" v-model="state.visible" :showFlag="state.showFlag" :modelInfo="state.selectRow" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">{{state.showFlag?'关闭':'取消'}}</el-button>
          <el-button v-if="!state.showFlag" type="primary" @click="saveModel">
            保存
          </el-button>
        </span>
      </template>
    </zh-dialog>

  </div>
</template>
<script lang="ts" setup name="tableModelManager">

import ColumAlertForm from '@/views/dataCenter/dataCenterColumAlert/ColumAlert.vue';
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------

//------------------定义子组件---------------------------
const queyFormRef=ref()
const tableListRef=ref()
const excelModelPage=ref()


//------------------内部变量定义-------------------------
const state=reactive({
  advanced:false,
  drawer:false,
  copyVisible:false,
  copyForm:{},
  rules:{
    datasourceId: [
      {
        required: true,
        message: '请输入所属数据源',
        trigger: 'blur',
      },
    ],


    tableId: [
      {
        required: true,
        message: '请输入表名',
        trigger: 'blur',
      },
    ],

  },

  queryParam:{newFlag:'1'} as any,
  dictData: [] as any,
  apiDict:[],
  tableApiDict:[],
  tableColumn:[
    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号', },
    { field: 'columnName', title: '字段名', align: 'center',  width: 100},
    { field: 'columnComment', title: '字段中文名', align: 'center',  width: 100},
    { field: 'columnDesc', title: '字段备注', align: 'center',  width: 100},
    { field: 'dataType', title: '字段类型', align: 'center',  width: 100},
    { field: 'dataLength', title: '字段长度', align: 'center',  width: 100},
    { field: 'dataScale', title: '小数位数', align: 'center',  width: 100},
    { field: 'primaryKey', title: '主键标志', align: 'center',  width: 100},
    { field: 'nullable', title: '是否为空', align: 'center',  width: 100},
    { field: 'columnDefault', title: '字段默认值', align: 'center',  width: 100},
    { field: 'codeType', title: '代码标识', align: 'center',  width: 100},
    { field: 'safeLevel', title: '字段分级', align: 'center',  width: 100},
    { field: 'desensitization', title: '脱敏类型', align: 'center',  width: 100},
    { field: 'corresField', title: '逻辑表对应的物理表字段', align: 'center',  width: 100},
    { field: 'corresTable', title: '逻辑表对应的物理表', align: 'center',  width: 100},
    { field: 'encryption', title: '是否加密', align: 'center',  width: 100},

    { field: 'operate', title: '操作', align: 'center',fixed: 'right',  width: 120,slots: {default: 'operate_default'}},

  ],
  selectRow:{},
  visible:false,
  modalTitle:"操作",
  showFlag:false,
})
//------------------定义调用方法-------------------------

function getTableList(datasourceId){

$api.common.send.post('coTableMeta0001', {datasourceId:datasourceId}).then((res) => {
    state.tableApiDict = res.result.list;

});
}

const onClose=()=>{
  state.visible = false;
}
const addTable=()=>{
  state.modalTitle = '新增字段信息';
  let params=state.queryParam;
  state.selectRow=params
  state.showFlag=false;
  state.visible = true;
}


const editModel=(row)=>{
  state.modalTitle = '修改字段信息';
  state.selectRow=row
  state.showFlag=false;
  state.visible = true;
}


const delTable=(row)=>{
  let params={id:row.id}
  $api.common.send.post('coTableFieldMeta0006',params).then(()=>{
    ElMessage.success('删除成功！');
    refreshTable();
  });

}

const saveModel=()=>{
  excelModelPage.value.save().then(() => {
    state.visible = false;
    tableListRef.value.query(state.queryParam)
	});
}
const refreshTable=()=>{
  tableListRef.value.refresh(state.queryParam)
}

//------------------初始化------------------------------
const params = {
    dictFields: 'dataSourceType',
};
$api.common.getBatchDict.post(params).then((res) => {
    state.dictData = res.result;
});

$api.common.send.post('dataSource0001',{}).then((res) => {
  state.apiDict = res.result.list;
  });

  $api.common.send.post('coTableMeta0001',{}).then((res) => {
  state.tableApiDict = res.result.list;
  });


onMounted(()=>{
  tableListRef.value.query(state.queryParam)
})
//------------设置给父组件调用的数据/方法(组件)-----------

</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
